//@flow

/**
 * 自定义导航栏
 * 自动识别刘海屏
 */

import React, { Component } from 'react';
import { 
    View,
    Text,
    ViewStyle,
    StatusBar,
 } from 'react-native';
import { NavigationContainer} from "react-navigation";
import { NAV_BAR_HEIGHT } from '../util/constant/size';
import { NavBackBtn } from "./navBackBtn";
import { safeAreaHOC } from '../base/safeAreaHOC';
import { NAV_BAR_TITLE_STYLE, THEME_COLOR } from '../util/constant/ui';
import { isLightColor } from '../util/common';
import { NavBarTitleView } from './navBarTitleView';
import { Navigate } from '../common/navigate';

export type Props = {
    leftItems	    :Array<React.Component>,//每个组件必须要有width字段
    titleView	    :string | React.Component,
    rightItems	    :Array<React.Component>,//每个组件必须要又width字段
    style	        :ViewStyle,
}
type State = {
    sideMenuWidth	:0,//两边按钮菜单的宽度
}
class NavBar extends Component <Props,State>{
    /**初始化props */
    static defaultProps:Props = {
        leftItems	:   [],
        titleView	:   '',
        rightItems	:   [],
        style	    :   {
            backgroundColor:THEME_COLOR,
        }
    }
    /**初始化state */
    state : State = {
        sideMenuWidth:0,
    }
    /**为了使标题居中，需要设置左右相等 */
    setStrictLayout(leftItems:Array<React.Component>,rightItems:Array<React.Component>){
        let leftWidth : number = 0;
        let rightWidht: number = 0;
        for(let left of leftItems){
            leftWidth += 50
        }
        for(let right of rightItems){
            rightWidht += 50
        }
        console.log(`left : ${leftWidth} \nright : ${rightWidht}`)
        if(leftWidth != rightWidht){
            this.setState({
                sideMenuWidth:leftWidth>rightWidht ? leftWidth : rightWidht
            })
        }else{
            return leftWidth
        }
    }
    /**生命周期函数 */
    componentDidMount(){
        this.setStrictLayout(this.props.leftItems,this.props.rightItems)
        StatusBar.setBarStyle(isLightColor(this.props.style.backgroundColor)?'dark-content':'light-content')
        console.log(`当前堆栈信息:${Navigate.getIndexInStack()}`);
    }
    /**快捷初始化方式 */
    render(){
        
        return (
            <View style={[this.props.style,{height:NAV_BAR_HEIGHT,flexDirection:'row',alignItems:'center'}]}>
                {/* 左边显示内容 */}
                <View style={{width:this.state.sideMenuWidth,flexDirection:'row'}}>
                {this.props.leftItems}
                </View>
                {/* 标题显示内容 */}
                <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                    {/* {typeof this.props.titleView === 'string'?<Text style={NAV_BAR_TITLE_STYLE}>{this.props.titleView}</Text>:this.props.titleView} */}
                    <NavBarTitleView title={this.props.titleView}/>
                </View>
                {/* 右边显示内容 */}
                <View style={{width:this.state.sideMenuWidth,flexDirection:'row'}}>
                    {this.props.rightItems}
                </View>
            </View>
        )
    }
}

NavBar = safeAreaHOC(NavBar,'top')
export {NavBar}